<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
    <style>

    </style>
</head>
<body>


<div id="vuebox">
    <div class="container">


        <br/>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>等级</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in personList.data">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                    <p v-if="item.gender==1">男</p>
                    <p v-if="item.gender==2">女</p>
                </td>
                <td>{{item.age}}</td>
                <td>{{item.rank}}</td>
                <td>
                    <p v-if="item.department==1">保安部</p>
                    <p v-if="item.department==2">开发部</p>
                    <p v-if="item.department==3">设计部</p>
                </td>
                <td>
                    <button class="btn btn-danger" @click="deletePerson(item.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <br/>

        <div class="col-md-4 text-right">
            <a @click.stop="showModal()" class="btn btn-primary">新增电子图书</a>
        </div>


        <!--添加模态框-->
        <!--模态框-->
        <div class="modal" id="mymodal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" type="button" @click="hideModal()">&times;</button>
                        <div class="modal-title">
                            添加人员列表
                        </div>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">

                            <!--<input type="text" v-model="new_entry.id" id="entry_id">-->


                            <div class="form-group">
                                <label for="name" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input v-model="new_person.name" id="name" type="text" class="form-control"
                                           placeholder="请输入图书名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="gender" class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <select name="gender" id="gender" class="form-control" v-model="new_person.gender">
                                        <option value="0">请选择</option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="age" class="col-sm-2 control-label">年龄</label>
                                <div class="col-sm-10">
                                    <input v-model="new_person.age" id="age" type="text" class="form-control"
                                           placeholder="请输入图书名称">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="rank" class="col-sm-2 control-label">等级</label>
                                <div class="col-sm-10">
                                    <select name="rank" id="rank" class="form-control" v-model="new_person.rank">
                                        <option value="0">请选择</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="department" class="col-sm-2 control-label">部门</label>
                                <div class="col-sm-10">
                                    <select name="department" id="department" v-model="new_person.department" class="form-control" >
                                        <option value="0" >全部</option>
                                        <option value="1">保安部</option>
                                        <option value="2">开发部</option>
                                        <option value="3">设计部</option>
                                    </select>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" @click="hideModal()">关闭</button>
                        <button class="btn btn-primary" @click="savePerson()">保存</button>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
</body>
</html>
<script>
    var vm = new Vue({
        el: "#vuebox",
        data: {
            personList: {},
            new_person: {id: "", name: "", gender: "0", age: "", rank: "0", department: "0"},
            delResult: {},
        },
        methods: {
            showModal: function () {
                $("#mymodal").modal("show");
            },
            hideModal: function () {
                $("#mymodal").modal("hide");
                this.clearFrom();
            },
            clearFrom: function () {
                $("#name").val("");
                $("#gender").val("0");
                $("#age").val("");
                $("#rank").val("0");
                $("#department").val("0");
            },
            savePerson: function () {
                axios.post("http://localhost:8080/addPerson", this.new_person).then(res => {
                    this.delResult = res.data;
                    if (this.delResult.result = "SUCCESS") {
                        alert("增加成功");
                        this.hideModal();
                        this.select();
                    }
                })
            },
            select:function () {
                axios.get("http://localhost:8080/selectPerson").then(res => {
                    this.personList = res.data
                });
            },
            deletePerson:function (id) {
                axios.get("http://localhost:8080/deletePerson",{params:{id:id}}).then(res => {
                    this.delResult = res.data;
                if(this.delResult.result='SUCCESS'){
                    alert("删除成功!");
                    this.select();
                }
                });
            }

        },
        mounted() {
          this.select();
        }
    })
</script>